<template>
    <div>
      <h1>将style属性绑定为数组</h1>
      <div :style="[activeclass, borderclass]"></div>
      <div
        :style="[isactive ? activeclass : '', isborder ? borderclass : '']"
      ></div>
      <div
        :style="[{ backgroundColor: 'red', height: '10px' }, borderclass]"
      ></div>
      <button @click="isactive = !isactive">bg切换</button>
      <button @click="isborder = !isborder">bk切换</button>
    </div>
  </template>
  <script setup>
  import { ref } from "vue";
  const activeclass = {
    backgroundColor: "orange",
    height: "20px"
  };
  const borderclass = {
    border: "2px solid blue"
  };
  const isactive = ref(true);
  const isborder = ref(true);
  </script>
  <style></style>
  